<template>
    <div v-if="weChart == 1" class="layout grid_columns5">
        <div class="population">
            <p class="population_title">浏览总人数</p>
            <p class="population_num">{{ boardData.view_people || 0 }}</p>
        </div>
        <div class="population">
            <p class="population_title">浏览总次数</p>
            <p class="population_num">{{ boardData.view_num || 0 }}</p>
        </div>
        <div class="population">
            <p class="population_title">浏览总时长</p>
            <p class="population_num">
                <span class="num">{{ minute }}</span>
                <span class="unit">m</span>
                <span class="num">{{ second }}</span>
                <span class="unit">S</span>
            </p>
        </div>
        <div class="population">
            <p class="population_title">员工分享总人数</p>
            <p class="population_num">{{ boardData.staff_share_num || 0 }}</p>
        </div>
        <div class="population">
            <p class="population_title">客户分享总人数</p>
            <p class="population_num">{{ boardData.cust_share_num || 0 }}</p>
        </div>
    </div>
    <div v-else class="layout grid_columns3">
        <div class="population">
            <p class="population_title">点赞数</p>
            <p class="population_num">{{ monmentData.like_num || 0 }}</p>
        </div>
        <div class="population">
            <p class="population_title">评论数</p>
            <p class="population_num">{{ monmentData.comment_per_num || 0 }}</p>
        </div>
        <div class="population">
            <p class="population_title">评论人数</p>
            <p class="population_num">{{ monmentData.comment_user_num || 0 }}</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue';
const props = defineProps(['boardData', 'weChart', 'monmentData']);

const minute = computed(() => {
    return Math.floor(props.boardData.view_length / 60) || 0;
});

const second = computed(() => {
    return Math.floor(props.boardData.view_length % 60) || 0;
});
</script>
<style lang="scss" scoped>
.layout {
    display: grid;
    padding: 32px 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    background-color: #fff;

    .population {
        text-align: left;

        &_title {
            font-size: 16px;
            font-weight: 400;
            color: #35383a;
            line-height: 16px;
            margin-bottom: 16px;
        }

        &_num {
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
        }

        .population_num {
            display: flex;
            align-items: flex-end;
            line-height: 1;

            span {
                margin-right: 4px;
                color: #33302d;

                &:last-of-type {
                    margin-right: 0;
                }
            }

            .num {
                font-size: 30px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                color: #33302d;
            }

            .unit {
                font-size: 18px;
                line-height: 1;
                padding-bottom: 2px;
            }
        }
    }
}

.grid_columns5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid_columns3 {
    grid-template-columns: repeat(3, 1fr);
}
</style>
